<template>
  <div class="list">

    <!--S顶部-->
    <roof
      :show-left-capsule="true"
      title="列表">
    </roof>
    <!--E顶部-->

    <!--S搜索&&分类-->
    <div
      id="search-classify"
      :style="{top:systemInfo.statusBarHeight + capsule_height + 'px'}"
    >
      <!--S搜索-->
      <div class="search">
        <i class="iconfont icon-sousuo"></i>
        <input
          type="text"
          :value="search.value"
          placeholder="想要什么搜一下"
          confirm-type="search"
          @confirm="submitSearch"
        />
        <i
          v-if="search.value !== ''"
          class="iconfont icon-guanbi"
          @click="closeSearch"
        ></i>
      </div>
      <!--E搜索-->

      <!--S分类-->
      <div class="classify">
        <scroll-view
          class="classify-scroll"
          :scroll-x="true">
          <p
            v-for="(item,index) in classify"
            :key="id"
            :class="classify_index >= 0 && classify[classify_index].id === item.id ? 'active' : ''"
            @click="clickClassify(index)"
          >
            {{item.name}}
          </p>
        </scroll-view>
      </div>
      <!--E分类-->
    </div>
    <!--E搜索-->

    <!--S列表内容-->
    <div id="content"
         :style="{'padding-top':content_padding_top+'px'}"
    >
      <scroll-view
        class="scroll"
        :scroll-y="true"
        :scroll-with-animation="true"
      >
        <div class="stall-list" v-if="list.data.length > 0">
          <stall-list></stall-list>
        </div>
        <empty v-else></empty>
      </scroll-view>
    </div>
    <!--E列表内容-->

  </div>
</template>

<script>
  import store from '../../store/index'
  import roof from '../../components/roof/Roof'
  import {select} from '../../utils'
  import stallList from '../../components/stall-list/StallList'
  import empty from '../../components/empty/Empty'
  export default{
    data () {
      return {
        // 顶部填充区域高度
        content_padding_top: 0,
        // 胶囊高度
        capsule_height: 0,
        // 分类
        classify: [
          {
            id: 0,
            name: '全部'
          },
          {
            id: 1,
            name: '分类1'
          },
          {
            id: 2,
            name: '分类2'
          },
          {
            id: 3,
            name: '分类3'
          },
          {
            id: 4,
            name: '分类4'
          },
          {
            id: 5,
            name: '分类5'
          },
          {
            id: 6,
            name: '分类6'
          },
          {
            id: 7,
            name: '分类7'
          },
          {
            id: 8,
            name: '分类8'
          }
        ],
        // 分类下标
        classify_index: 0,
        // 搜索
        search: {
          value: '' // 搜索的内容
        },
        // 列表
        list: {
          data: [1],
          limit: [0, 6]
        }
      }
    },
    computed: {
      // 设备信息
      systemInfo () {
        return store.state.systemInfo
      },
      // 胶囊位置信息
      capsulePosition () {
        return store.state.capsule
      }
    },
    components: {
      roof,
      'stall-list': stallList,
      empty
    },
    mounted () {
      this.setCapsuleHeight()
      this.setContentPaddingTop()
    },
    methods: {
      // Run
      /**
       * 设置胶囊的高度
       */
      setCapsuleHeight () {
        this.capsule_height = this.capsulePosition.height + ((this.capsulePosition.top - this.systemInfo.statusBarHeight) * 2)
      },
      /**
       * 设置内容区域的padding-top
       */
      setContentPaddingTop () {
        select('#search-classify')
          .then((res) => {
            this.content_padding_top = this.systemInfo.statusBarHeight + this.capsule_height + res[0].height
          })
      },

      // Handle
      /**
       * 点击分类导航
       */
      clickClassify (index) {
        this.search.value = ''
        this.classify_index = index
        console.log('加载列表')
      },
      /**
       * 搜索
       */
      submitSearch (ev) {
        this.classify_index = -1
        this.search.value = ev.target.value
      },
      /**
       * 关闭搜索
       */
      closeSearch () {
        this.search.value = ''
        this.classify_index = 0
        this.clickClassify(0)
      }
    }
  }
</script>
<style scoped lang="less" src="./index.less"></style>
